<!--订单列表-->
<style scoped lang="less">
.device-search {
    padding-right: 44px;
    position: relative;
}
.device-search .ds-lft {
    border: 1px dotted #ddd;
    border-radius: 4px;
    background: #fff;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
}
.device-search .ds-lft .txt {
    padding: 0 10px;
    border-right: 1px solid #ddd;
}
.device-search .ds-lft .ipt input {
    float: left;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    width: 100%;
    box-sizing: border-box;
}
.device-search .ds-lft .icon {
    background: #77babd;
    color: #fff;
    padding: 0 12px;
}
.icon-search:before {
    content: "\e62b";
}
.device-search .scan {
    position: absolute;
    right: 3px;
    top: 6px; 
} 

.checkbox-item1 {
  display: inline-block;  
  position: relative;
}
.checkbox-item1 label{
  line-height: 34px;
  vertical-align: middle;
  cursor: pointer;
}
.checkbox-item1 input[type="checkbox"] {
  margin-right: 5px;
  width: 20px;
  height: 20px;
  visibility: hidden;
}
/* 设计新的checkbox，位置 */
.checkbox-item1 label:BEFORE {
  content: '';
  position: absolute;
  top: 5px;
  left: 0px;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  border: 1px solid #bbb;
  background: #fff;
  cursor: pointer;
}
/* 点击初始的checkbox，将新的checkbox关联起来 */
.checkbox-item1 input[type="checkbox"]:checked +label:BEFORE {
  content: '\2713';
  display: block;
  line-height: 20px;
  vertical-align: middle;
  text-align: center;
  background-color: #1890FF;
    color: #ffffff;
}

.checkbox-item{
  display: inline-block;  
  position: relative;
  margin-top: 20px;
}
.checkbox-item label{
  line-height: 34px;
  vertical-align: middle;
  cursor: pointer;
}
.checkbox-item input[type="checkbox"] {
  margin-right: 5px;
  width: 20px;
  height: 20px;
  visibility: hidden;
}
/* 设计新的checkbox，位置 */
.checkbox-item label:BEFORE { 
  position: absolute;
  top: 5px;
  left: 0px;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  cursor: pointer; 
  content: '\2716';
  display: block;
  line-height: 20px;
  vertical-align: middle;
  text-align: center;
  background-color: #888;
    color: #ffffff;
}
/* 点击初始的checkbox，将新的checkbox关联起来 */
.checkbox-item input[type="checkbox"]:checked +label:BEFORE {
  content: '\2716';
  display: block;
  line-height: 20px;
  vertical-align: middle;
  text-align: center;
  background-color: #888;
    color: #ffffff;
}

.modelsty {
  width: 6rem;
      font-size: 16px;
    border-radius: 4px;
    padding: 15px;
}
.icon-remind{
  font-size: 18px;// 定义字体图标大小
  color: #0091ff;// 定义字体图标颜色
  vertical-align: middle;// 垂直居中
  color: #77babd;
      margin-top: 10px;
    position: absolute;
  &:before{// 在最前面显示
    content: "\26A0";
  }
}
.gridbg {
  background-color: #fefefe;
}
.order-list {
  .todo {
    height:0.86rem; 
    line-height:0.86rem; 
    padding:0 0.2rem;
    .tag {
      height:0.56rem;
      line-height: 0.56rem;
      padding:0 0.2rem;
      margin-left: 0.1rem;
      background:#ff7202;
      color:#fff;
      border-radius: 0.28rem;
    }
  }
  .list-order-warp{
    background: #fff;
    .title {
      padding:10px;
      color:#888;
      font-size:14px; 
      border-bottom:1px solid #ebebeb;
    }
    .con {
      padding: 0.1rem 0.2rem;
      border-bottom: 1px solid #ebebeb;
      .cargo {
        margin: 0.1rem;
        height: 1.3rem;
        width:1.3rem;
        text-align: center;
        border-radius: .08rem;
        background: #edf8f8;
        overflow: hidden;
        i {
          display: block;
          height: 1rem;
          line-height: 1rem;
          font-size: .6rem;
          color: #77babd;
        }
        p {
          height: .3rem;
          line-height: .3rem;
          font-size: .2rem;
          color: #fff;
          background: #77babd;
        }
      }
      .msg {
        margin-left:0.2rem;
        font-size:13px;
        line-height: 0.5rem;
      }
    }
    .btn-grp {
      padding:0.1rem 0.2rem 0.1rem 0;
      text-align: right;
      .btn{
        margin-left: 0.1rem;
      }
    }
  }
}
</style>


<template>
  <div class="contain order-list">
    <div class="listhead-fix">
      <!--search-->
      <div class="m-sech-wrap mr20">
        <div class="device-search">
            <div class="ds-lft displayflex">
              <div class="txt">订单/设备</div>
              <div class="ipt flex1"><input type="text" placeholder="请输入订单号或设备编号" v-model="billno"></div>
              <div class="icon" @click="getPopupVisible()"><i class="iconfont ft16 icon-search"></i></div>
            </div>
            <div class="scan orange"><img src="~images/icon/saomiao.png"></div>
          </div>
      </div>
      <!--tab-->
      <div class="ft14" style="background: #ffffff;height: 43px;border-bottom: 2px solid #ebebeb">
        <div style="width: 1.2rem;float: left;line-height: 42px;text-align: center;">已选择:</div>
        <tab bar-active-color="#77babd" defaultColor="#333333" active-color="#77babd" :line-width='2' v-model="tabNo" style="width: 5.8rem; float: left;">
          <tab-item @on-item-click="tabNo = 0">订单{{todolist.length}}</tab-item>
          <tab-item @on-item-click="tabNo = 1">冷藏箱{{coldEquipmentApiListSelectCount}}</tab-item>
          <tab-item @on-item-click="tabNo = 2">温度记录仪{{coldEquipmentApiListSelectCountS}}</tab-item> 
        </tab>
        <a class="icon-remind" @click="popupVisible=true"></a>
      </div>
    </div>
    <scroller lock-x scrollbar-y use-pullup height="-167" class='scroller-wrap' @on-pullup-loading="getData"  :pullup-config="ScrollerConfig" ref="Scroller">
      <div>

        <div class="list-order-warp mb30" v-for="item in todolist" v-if="tabNo == 0">
          <div class="title">
            业务单号：{{item.BBillNo}}
            <!-- <em class="org f-r ft12">{{ (item.Information && item.Information !== ''?'Err': item.State) | PoState}}</em> -->
          </div>
          <div class="displayflex con"><!--   v-on:click="goToPath('/order/orderDetail', item, 1)" -->
            <span class="cargo">
              <i class="iconfont icon-cargo"></i>
              <p>{{item.Pkgs}}件</p>
            </span>
            <div class="msg" style="width: 4.9rem;">
              <p v-if="item.Information && item.Information !== ''" class="ft15"><i class="llse llse-yichang ft15 red"></i>{{item.ExceptionMemo && item.ExceptionMemo !== ''?item.ExceptionMemo:item.Information}}</p>
              <p>单据时间：{{item.BillDate | time}}</p>
              <p>收货联系人：{{item.SendContacts}}&nbsp<span class="flex1" v-if="item.SendContactsTel">{{item.SendContactsTel}}<a :href="'tel:' +  item.SendContactsTel " class="iconfont icon-phone org ml10"></a></span></p>
              <p>收货单位：{{item.SaleCorpName}}</p>
            </div>
            <div class="checkbox-item" @click="DeleteGuid(item.Guid)"> 
                  <label class="checkbox-label" :for="item.Guid"></label>
              </div>
          </div>
          <div class="btn-grp">
            <div class="btn" v-on:click="goToPath('/order/orderDetail', item, 1)">详情</div>
          </div>
        </div>

        <div class="list-order-warp mb30" v-for="equ in coldEquipmentApiList" v-if="tabNo == 1">
          <div class="title">
            设备编号：{{equ.Code}}
            <!-- <em class="org f-r ft12">{{ (item.Information && item.Information !== ''?'Err': item.State) | PoState}}</em> -->
          </div>
          <div class="displayflex con"><!--   v-on:click="goToPath('/order/orderDetail', item, 1)" -->
            <span class="cargo">
              <i class="iconfont icon-cargo"></i>
              <!-- <p>{{item.Pkgs}}件</p> -->
            </span>
            <div class="msg" style="width: 4.9rem;">
              <p>名称：{{equ.Name}}</p>
              <p>状态：可用</p>
              <p>品牌：{{equ.Brand}}</p>
            </div>
            <div class="checkbox-item1" >
                  <input :name="equ.Guid" :id="equ.Guid" type="checkbox" :value="equ.Guid"  v-model="checkModel" />
                  <label class="checkbox-label" :for="equ.Guid"></label>
              </div>
          </div>
        </div>


        <div class="list-order-warp mb30" v-for="equ1 in coldEquipmentApiList1" v-if="tabNo ==2">
          <div class="title">
            设备编号：{{equ1.Code}}
            <!-- <em class="org f-r ft12">{{ (item.Information && item.Information !== ''?'Err': item.State) | PoState}}</em> -->
          </div>
          <div class="displayflex con"><!--   v-on:click="goToPath('/order/orderDetail', item, 1)" -->
            <span class="cargo">
              <i class="iconfont icon-cargo"></i>
            </span>
            <div class="msg" style="width: 4.9rem;">
              <p>名称：{{equ1.Name}}</p>
              <p>状态：可用</p>
              <p>品牌：{{equ1.Brand}}</p>
            </div>
            <div class="checkbox-item1" >
                  <input :name="equ1.Guid" :id="equ1.Guid" type="checkbox" :value="equ1.Guid"  v-model="checkModel1" />
                  <label class="checkbox-label" :for="equ1.Guid"></label>
              </div>
          </div>
        </div> 


      </div>
      <div v-if="noMore" class="loader-over">没有更多记录了</div>
    </scroller>
    <div class="noDate_page" v-if="todolist.length<=0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      暂无数据！
    </div>
    <mt-popup
        v-model="popupVisible" class="modelsty"
        position="center">
        <div>
        注：<br/>
        1.发货方式：一体式保温箱，此时温控仪与保温箱在基础资料维护中已绑定，设备关联时选定商品后，只需选择保温箱编号即可将商品与保温箱及温控仪关联。<br/>
        2.发货方式：分解式保温箱，此时温控仪与保温箱为分体式结构。设备关联时选定商品后，需选择保温箱编号和温控仪变阿豪，才可将商品与设备完成关联。<br/>
        3.发货方式：冷藏箱，此时温控仪与冷藏箱为分体式结构，设备关联时选定商品后，需选择冷藏箱编号和温控仪编号，才可将商品与设备完成关联。
      </div>
      </mt-popup>
      <div class="form-btn">
      <div class="btn-large" @click="DeviceAssociation()">确认关联设备</div>
    </div>
    <!-- <manage-footer :status='2'></manage-footer> -->
  </div>
</template>

<script>
import manageFooter from '@/components/core/footer/manage.footer.vue';
import { mapState } from 'vuex';
export default {
  name:'delivery',
  components: {
    manageFooter
  },
  data() {
    return {
      sechTxt:'',
      todolist:[],
      tabNo:0,
      threshold:4,
      popupVisible:false,
      checkModel:[],
      checkModel1:[],
      guidLIst:[],
      billno:'',
      coldEquipmentApiList:[],
      coldEquipmentApiList1:[],
      coldEquipmentApiListSelectCount:0,
      coldEquipmentApiListSelectCountS:0,
      ColdEquipmentType:'',

      stateList:["81", "52", "53", "56", "11", "12"],

      PageIndex: 1,
      PageSize:4,
      totalRecords:0,
      noMore:false,
      ScrollerConfig:{
        content: '上拉加载',
        downContent: '上拉加载',
        height: 0,
        loadingContent: '加载中...',
        upContent: '上拉加载',
      },
    }
  },
  computed: {
    userinfo(){
      return localStorage.getItem('userinfo') ? JSON.parse(localStorage.getItem('userinfo')) : null;
    }
  },
  watch: {
    tabNo(n,o){
      this.stateList = [];
      switch (n) {
        case 0:
          this.stateList = ["81", "52", "53", "56", "11", "12"];
          break;
        case 1:
          this.SearchColdEquipmentApi();
          break;
        case 2:
          this.SearchColdEquipmentApi1();
          break;
        case 3:
          this.stateList = ["52", "53", "56"];
          break;
        case 4:
          this.stateList = ["81"];
          break;
        case 5:
          this.stateList = [];
          break;
      }
      // this.goLink();
    },
    checkModel(n){
      this.coldEquipmentApiListSelectCount = this.checkModel.length;
    },
    checkModel1(n){
      this.coldEquipmentApiListSelectCountS = this.checkModel1.length;
    }
  },
  ready() {
    
  },
  created(){
    // this.$nextTick(()=>{
    //   this.sechTxt = sessionStorage.sechtxt;
    //   if(sessionStorage.getItem('ConsumableTab')){
    //     this.tabNo = sessionStorage.getItem('ConsumableTab')*1;
    //     sessionStorage.removeItem('ConsumableTab')
    //   } else {
    //     this.tabNo = 0;
    //   }
    // })
    this.getData();
  },
  mounted() {
    this.$nextTick(function() {
      
    })
  },
  methods: {
    showHos(){

    },
    // goLink(){
    //   sessionStorage.removeItem('sechtxt');
    //   this.getData(1);
    // },
    getPopupVisible(){
      if(this.tabNo==0){
        this.getData();
      }else if(this.tabNo==1){
        this.SearchColdEquipmentApi();
      }else{
        this.SearchColdEquipmentApi1();
      }
    },
    getData(){
      this.guidLIst = JSON.parse(sessionStorage.OrderCheckitem);
      let query = {
          Guidlist: this.guidLIst,
          BBillNo:this.billno,
        };
      this.Ajax.post('SearchTRTPLBBApi',query).then((res) => {
        if (res.IsSuccess) {
          this.totalRecords = res.TotalRecords; 
          if(res.Datas && res.Datas.length > 0){
            this.PageIndex++;
            this.todolist = res.Datas;
            this.ColdEquipmentType = this.todolist[0].ColdEquipmentCategory;
            this.ScrollControl();
          }else{
            this.todolist =[];
          }
        } else {
          this.Toast({
              message: '列表为空，请稍后刷新',
          });
        }
      });
    },
    SearchColdEquipmentApi(){
      this.coldEquipmentApiList = [];
      let query = {
          TenantGuid: this.userinfo.TenantGuid,
          Type:this.tabNo,
          Code:this.billno
        };
      this.Ajax.post('SearchColdEquipmentApi',query).then((res) => {
        if (res.IsSuccess) {
          //this.totalRecords = res.TotalRecords; 
          if(res.Datas && res.Datas.length > 0){
            this.PageIndex++;
            this.coldEquipmentApiList = res.Datas
            this.ScrollControl();
          }
        } else {
          this.Toast({
              message: '列表为空，请稍后刷新',
          });
        }
      });
    },
    SearchColdEquipmentApi1(){
      
      let query = {
          TenantGuid: this.userinfo.TenantGuid,
          Type:this.tabNo,
          Code:this.billno
        };
      this.Ajax.post('SearchColdEquipmentApi',query).then((res) => {
        if (res.IsSuccess) {
          //this.totalRecords = res.TotalRecords; 
          if(res.Datas && res.Datas.length > 0){
            this.PageIndex++;
            this.coldEquipmentApiList1 = res.Datas
            this.ScrollControl();
          }
        } else {
          this.coldEquipmentApiList1 = [];
          this.Toast({
              message: '列表为空，请稍后刷新',
          });
        }
      });
    },
    DeviceAssociation(){
      let self = this;
      if (self.guidLIst.length==0) {
          self.Toast({
            message: "请选择订单进行设备关联！"
          });
          return false;
      }
      if (self.guidLIst.length > 1) {
        if (self.checkModel.length > 1 || self.checkModel1.length > 1) {
          self.Toast({
            message: "多张订单只能选择一个冷链设备！"
          });
          return false;
        }
      }

      if (self.checkModel.length == 0 && self.checkModel1.length == 0) {
        self.Toast({
          message: "请选择设备！"
        });
        return false;
      }

      if(self.checkModel.length == 0 || self.checkModel1.length == 0){
        let Toster = "设备";
        if(self.checkModel.length == 0) {
          Toster = '保温箱';
        }
        if(self.checkModel1.length == 0) {
          Toster = '温度记录仪';
        }
        self.Toast({
          message: `请选择${Toster}！`,
        });
        return false;
      }
      let guids =[];
      for (let i = 0; i < this.todolist.length; i++) {
         guids.push(this.todolist[i].Guid);
      }
      let query = {
        ColdEquipmentType: self.ColdEquipmentType,
        trbbGuid: guids,
        MFColdEquipmentGuid: self.checkModel.concat(
          self.checkModel1
        ),
        StaffID: this.userinfo.StaffID,
        UserName: this.userinfo.Name

          // TenantGuid: this.userinfo.TenantGuid,
          // Type:this.tabNo,
          // Code:this.billno
        };
      this.Ajax.post('DeviceAssociation',query).then((res) => {
        if (res.IsSuccess) {
          self.Toast({
            message: "关联成功！"
          });
          sessionStorage.clear();
          this.$router.go(-1);
        } else {
          this.Toast({
              message: '关联失败！',
          });
        }
      });
    },
    DeleteGuid: function(Guid) { 
      for (let i = 0; i < this.todolist.length; i++) {
        if (Guid == this.todolist[i].Guid) {
          this.todolist.splice(i,1);
        }
      }
      // this.guidLIst = newguid;
      // console.log('1',this.guidLIst);
      // sessionStorage.clear();
      // sessionStorage.OrderCheckitem = JSON.stringify(this.guidLIst);
      // this.getData();
    },
    goToPath(url, item, type){
      let query = {};

      //订单详情
      if(type === 1){
        query = {
          BBGuid: item.Guid,
        }
      }
      //订单进度
      if(type === 2){
        query = {
          BBGuid: item.Guid,
          MainPoGuid: item.MainPoGuid,
          tabNo: 1
        }
      }
      //配送详情
      if(type === 3){
        query = {
          BBGuid: item.Guid,
          MainPoGuid: item.MainPoGuid,
          tabNo: 2
        }
      }

      //配送详情
      if(type === 4){
        query = {
          BBGuid: item.Guid,
        }
      }

      this.$router.push({
        path: url,
        query: query,
      })

    },
    gotoDet(value){
      // sessionStorage.item = JSON.stringify(value);
      this.$router.push({
        path:'/order/acceptDetail',
        query:{
          id:value.Guid
        }
      })
    },

    ScrollControl(){
      if(this.totalRecords <= this.PageSize){
        this.ScrollerConfig.content = '';
        this.noMore = true;
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
          });
        });
      }

      if(this.todolist.length > 0 && this.$refs.Scroller){
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.donePullup();
          });
        });
      }

      if (this.totalRecords == this.todolist.length) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }
    }
  }
}
</script>